<template>
  <div>
    <TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
    <div class="container">
      <TableCustom
        :columns="columns"
        :tableData="tableData"
        :total="page.total"
        :currentPage="page.currPage"
        :viewFunc="handleView"
        :delFunc="handleDelete"
        :change-page="changePage"
        :change-cell="changeCell"
        :editFunc="handleEdit"
      >
        <template #toolbarBtn>
          <el-button type="warning" :icon="CirclePlusFilled" @click="handleAdd"
            >新增</el-button
          >
        </template>
        <!-- 图片 -->
        <template #imgUrl="{ rows }">
          <el-image :src="rows.imgUrl" fit="cover" class="avatar"></el-image>
        </template>
        <!-- 状态 -->
        <template #advertisementStatus="{ rows }">
          <el-popover
            effect="light"
            trigger="hover"
            placement="top"
            width="auto"
            v-if="!rows.advertisementStatus"
          >
            <template #default>
              <div>可启用</div>
            </template>
            <template #reference>
              <el-tag type="danger">停用</el-tag>
            </template>
          </el-popover>
          <el-tag type="success" v-if="rows.advertisementStatus">启用</el-tag>
        </template>
        <!-- 广告类型 -->
        <!-- 状态 //类型 1-登录页 2-首页 3-广告页 -->
        <template #advertisementType="{ rows }">
          <div>
            {{
              rows.advertisementType === 1
                ? "登录页"
                : rows.advertisementType === 2
                ? "首页"
                : rows.advertisementType === 1
                ? "广告页"
                : ""
            }}
          </div>
        </template>
      </TableCustom>
    </div>
    <el-dialog
      :title="isEdit ? '编辑' : '新增'"
      v-model="visible"
      width="700px"
      destroy-on-close
      :close-on-click-modal="closeDialog"
      @close="closeDialog"
    >
      <TableEdit
        :form-data="rowData"
        :options="options"
        :edit="isEdit"
        :update="updateData"
        @closeDialogP="closeDialog"
      />
    </el-dialog>
    <el-dialog title="详情" v-model="visible1" width="700px" destroy-on-close>
      <TableDetail :data="viewData" @closeDialogP="visible1 = false">
        <!-- 图片 -->
        <template #coverUrl="{ rows }">
          <el-image :src="rows.imgUrl" fit="cover" class="avatar"></el-image>
        </template>
        <!-- 状态 -->
        <template #advertisementStatus="{ rows }">
          <el-tag type="success" v-if="rows.advertisementStatus === 1"
            >启用</el-tag
          >
          <el-tag type="danger" v-else>停用</el-tag>
        </template>
        <!-- 广告类型 -->
        <!-- 状态 //类型 1-登录页 2-首页 3-广告页 -->
        <template #advertisementType="{ rows }">
          <div>
            {{
              rows.advertisementType === 1
                ? "登录页"
                : rows.advertisementType === 2
                ? "首页"
                : rows.advertisementType === 1
                ? "广告页"
                : ""
            }}
          </div>
        </template>
      </TableDetail>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="system-user">
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { CirclePlusFilled } from "@element-plus/icons-vue";
import { User } from "@/types/user";
import {
  fetchAdvertisementData,
  fetchAdvertisementCreate,
  fetchDeleteAdvertisement,
} from "@/api/advertisementManage";
import TableCustom from "@/components/table-custom.vue";
import TableDetail from "@/components/table-detail.vue";
import TableSearch from "@/components/table-search.vue";
import { FormOption, FormOptionList } from "@/types/form-option";

// 查询相关
const query = reactive({
  keyword: "",
});
const searchOpt = ref<FormOptionList[]>([
  {
    type: "input",
    label: "广告名称：",
    prop: "keyword",
    placeholder: "请输入广告名称",
  },
]);
const handleSearch = () => {
  changePage(1);
};

// 表格相关
let columns = ref([
  { type: "index", label: "序号", width: 55, align: "center" },
  { prop: "imgUrl", label: "广告图", width: 200 },
  { prop: "advertisementName", label: "广告名称", width: 200 },
  { prop: "advertisementExplain", label: "广告说明" },
  { prop: "advertisementStatus", label: "状态", width: 200 }, //状态 0-停用 1-启用
  { prop: "advertisementType", label: "广告类型", width: 200 }, //类型 1-登录页 2-首页 3-广告页
  { prop: "createTime", label: "创建时间", width: 200 },
  { prop: "operator", label: "操作", width: 300, fixed: "right" },
]);
const page = reactive({
  currPage: 1,
  size: 10,
  total: 0,
});
const tableData = ref([]);
const getData = async () => {
  let params = {
    currPage: page.currPage,
    size: page.size,
    keyword: query.keyword,
    advertisementType: "", //类型 1-登录页 2-首页 3-广告页
  };
  const res = await fetchAdvertisementData(params);
  console.log("获取广告列表");
  console.log(res.data);
  tableData.value = res.data.data.records;
  page.total = res.data.data.total;
  console.log(page.total);
};
getData();

// 分页
const changePage = (val: number) => {
  console.log("点击分页---歌单分类管理");

  page.currPage = val;
  console.log(page.currPage);
  getData();
};

// 新增/编辑弹窗相关
let options = ref<FormOption>({
  labelWidth: "82px",
  span: 24,
  list: [
    {
      type: "input",
      label: "广告名称",
      prop: "advertisementName",
      required: true,
      placeholder: "请输入广告名称",
    },
    {
      type: "input",
      label: "广告说明",
      prop: "advertisementExplain",
      placeholder: "请输入广告说明",
    },
    {
      type: "switch",
      label: "状态",
      prop: "advertisementStatus",
      activeValue: 1,
      inactiveValue: 0,
      activeText: "启用",
      inactiveText: "停用",
    }, //状态 0-停用 1-启用
    {
      type: "select",
      label: "广告类型",
      prop: "advertisementType",
      placeholder: "请选择广告类型",
      opts: [
        { label: "登录页", value: 1 },
        // { label: "首页", value: 2 },
        // { label: "广告页", value: 3 },
      ],
    }, //类型 1-登录页 2-首页 3-广告页
    {
      type: "upload",
      label: "广告图片(请上传jpg，gif，png等图片格式)",
      prop: "coverUrl",
    },
  ],
});
const visible = ref(false);
const isEdit = ref(false);
const rowData = ref({ advertisementType: 1 });

// 新增
const handleAdd = (row) => {
  console.log("新增");
  rowData.value = { ...row };
  console.log(rowData.value);
  rowData.value.advertisementType = 1;
  isEdit.value = false;
  visible.value = true;
};

// 编辑
const handleEdit = (row) => {
  console.log("编辑");
  row.coverUrl = row.imgUrl;
  rowData.value = { ...row };
  console.log(rowData.value);
  rowData.value;
  isEdit.value = true;
  visible.value = true;
};
const updateData = async (data) => {
  data.imgUrl = data.coverUrl;
  let datas = {};
  let obj = { advertisementId: data.advertisementId };
  if (isEdit.value) {
    datas = { ...obj, ...data };
  } else {
    datas = { ...data };
  }
  console.log("最终编辑或者新增的数据---是");
  console.log(datas);
  const res = await fetchAdvertisementCreate(datas);
  console.log("创建广告");
  console.log(res.data);
  closeDialog();
  getData();
};

const closeDialog = () => {
  visible.value = false;
  isEdit.value = false;
};

// 详情弹窗相关
const visible1 = ref(false);
const viewData = ref({
  row: {},
  list: [],
});
const handleView = (row) => {
  viewData.value.row = { ...row };
  viewData.value.list = [
    {
      prop: "advertisementName",
      label: "广告名称",
    },
    {
      prop: "advertisementExplain",
      label: "广告说明",
    },
    {
      prop: "advertisementStatus",
      label: "状态",
    },
    {
      prop: "advertisementType",
      label: "广告类型",
    },
    {
      prop: "coverUrl",
      label: "广告图",
    },
    {
      prop: "createTime",
      label: "创建时间",
    },
  ];
  visible1.value = true;
};

// 删除相关
const handleDelete = async (row) => {
  console.log("删除");
  console.log(row);
  let datas = {
    id: row.advertisementId,
  };
  const res = await fetchDeleteAdvertisement(datas);
  if (res.data.code == 0) {
    ElMessage.success("删除成功");
    getData();
  }
};

// 点击单元格
const datas = ref({
  advertisementStatus: 0,
});
const changeCell = (val, column, rowIndex, columnIndex) => {
  // console.log("点击单元格11");
  // console.log(val);
  datas.value = JSON.parse(JSON.stringify(val));
  console.log(column, rowIndex, columnIndex);
  if (column.label == "状态" && val.advertisementStatus === 0) {
    datas.value.advertisementStatus = 1;
    console.log("最终数据");
    console.log(datas.value);
    ElMessageBox.confirm("确定要更改状态吗？", "提示", {
      type: "warning",
    })
      .then(async () => {
        const res = await fetchAdvertisementCreate(datas.value);
        if (res.data.code == 0) {
          ElMessage.success("启用成功");
          getData();
        }
      })
      .catch(() => {});
  }
};
</script>

<style scoped>
.avatar {
  width: 100px;
  height: auto;
  margin: 0 auto;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
</style>
